<template>
  <div>
    <el-table
      ref="table"
      v-loading="crud.loading"
      border
      :data="crud.data"
      :span-method="dataSpanMethod"
      max-height="350"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column :show-overflow-tooltip="true" label="原脚本名称" prop="sourceFileName" min-width="150" />
      <el-table-column :show-overflow-tooltip="true" label="转换后脚本名称" prop="convertFileName" min-width="150" />
      <el-table-column :show-overflow-tooltip="true" label="是否编辑" prop="isSourceFileEdit">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isSourceFileEdit == 'Y'" type="danger">是</el-tag>
          <el-tag v-else-if="scope.row.isSourceFileEdit == 'N'" type="success">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="是否编辑" prop="isConvertFileEdit">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isConvertFileEdit == 'Y'" type="danger">是</el-tag>
          <el-tag v-else-if="scope.row.isConvertFileEdit == 'N'" type="success">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="转换人" prop="crtUserName" min-width="100" />
      <el-table-column :show-overflow-tooltip="true" label="开始时间" prop="convertStartTs" min-width="150" />
      <el-table-column :show-overflow-tooltip="true" label="结束时间" prop="convertEndTs" min-width="150" />
      <el-table-column :show-overflow-tooltip="true" label="转换状态" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 'SUCCESS'" type="success">成功</el-tag>
          <el-tag v-else-if="scope.row.status == 'FAIL'" type="warning">失败</el-tag>
          <el-tag v-if="scope.row.status == 'TODO'" type="info">待转换</el-tag>
          <el-tag v-else-if="scope.row.status == 'PROCESSING'">转换中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="原文件对比" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="operateClick(scope.row, 'source')">同屏对比</el-button>
        </template>
      </el-table-column>
      <el-table-column label="转换后文件对比" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" :disabled="!scope.row.convertFileName" @click="operateClick(scope.row, 'convert')">同屏对比</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div style="line-height: 20px; height: 20px;">
      <pagination />
    </div>

    <!-- 同屏对比 -->
    <el-dialog :visible.sync="isShowComparison" append-to-body title="脚本同屏对比" width="90%" top="5vh">
      <same-screen-comparison
        v-if="isShowComparison"
        :crud-pk-id="scriptListPkId"
        :hist-pk-id="lookConvertListPkId"
        :file-type="fileType"
        :convert-file-name="convertFileName"
      />
    </el-dialog>
  </div>
</template>
<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import scriptConvertListApi from '@/api/script/transfer/script-convert-list'
import sameScreenComparison from './same-screen-comparison'

const defaultCrud = CRUD({ title: '转换历史', url: 'api/script/convert/list/convertHistory', crudMethod: { ...scriptConvertListApi }})
const defaultForm = {}

export default {
  name: 'ConvertHistory',
  // eslint-disable-next-line vue/no-unused-components
  components: { pagination, sameScreenComparison },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  props: {
    scriptName: {
      required: true,
      type: String
    },
    scriptListPkId: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      isShowComparison: false,
      lookConvertListPkId: null,
      fileType: 'source',
      convertFileName: null,
      indexArray: [],
      tableData: []
    }
  },
  created() {
  },
  methods: {
    [CRUD.HOOK.beforeRefresh](crud) {
      crud.query.sourceFileName = this.scriptName
      crud.query.pkId = this.scriptListPkId
    },
    [CRUD.HOOK.afterRefresh](crud) {
      this.indexArray = []
      this.tableData = crud.data
      let count = 0
      for (let rowIndex = 0; rowIndex < this.tableData.length;) {
        this.indexArray.push(rowIndex)
        count = this.getRows(rowIndex, this.tableData[rowIndex].pkId)
        rowIndex += count
      }
    },
    getRows(rowIndex, pkId) {
      let count = 0
      for (let i = rowIndex; i < this.tableData.length; i++) {
        if (this.tableData[i].pkId === pkId) {
          count++
        } else {
          break
        }
      }
      return count
    },
    dataSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let rowCount = 0
        if (this.indexArray.includes(rowIndex)) {
          rowCount = this.getRows(rowIndex, row.pkId)
          return { rowspan: rowCount, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      }
    },
    operateClick(row, fileType) {
      this.isShowComparison = true
      this.lookConvertListPkId = row.pkId
      this.convertFileName = row.convertFileName
      this.fileType = fileType
    }
  }
}
</script>
